@black: #000000;
@light-black: lighten(@black, 22%);  // #383838

.light-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* tricky, search is 200  increase this*/
  z-index: @z-index-modal;
  background-color: rgba(57, 60, 64, .8);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;

  height: 100%;
  line-height: 1.6px;
  overflow: auto;
  background-color: fadeout(@black, 50%);
  color: @light-black;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;

  > .wrapper {
    padding: 60px 0;
    overflow: auto;
    text-align: center;
  }

  > .wrapper > .box {
    max-width: 600px;
    min-width: 350px;
    display: inline-block;
    width: auto;
    background-color: white;
    border-radius: 3px;
    text-align: left;

    .content {
      padding: 20px;
      line-height: 28px;

      .inner {
        margin-bottom: 20px;
      }
    }

    .actions {
      text-align: right;
    }
  }
}

// In & Out transition
.light-dialog.fade-enter .box {
  transform: translate(0, -40px);
}

.light-dialog.fade-enter-active .box {
  transform: translate(0, 0) scale(1);
  transition: transform 200ms ease-in-out;
}

.light-dialog.fade-leave .box {
  transition: all 150ms ease-in-out;
}

.light-dialog.fade-leave-active .box {
  opacity: 0.01;
  transform: translate(0, -40px);
}
